<template>
	<el-card shadow="hover" header="内存占用" v-loading="loading">
		<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	var _this = this;
	export default {
		title: "内存占用",
		icon: "el-icon-data-line",
		description: "Echarts组件演示",
		components: {
			scEcharts
		},
		data() {
			return {
				loading: true,
				option: {}
			}
		},
		created() {
			_this = this;
			setTimeout(function() {
				_this.loading = false
			}, 500);

			var option = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					boundaryGap: false,
					type: 'category',
					data: (function() {
						var now = new Date();
						var res = [];
						var len = 30;
						while (len--) {
							res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
							now = new Date(now - 30000);
						}
						return res;
					})()
				},
				yAxis: [{
					type: 'value',
					name: '百分比(%)',
					"splitLine": {
						"show": false
					}
				}],
				series: [{
					name: '内存占用',
					type: 'line',
					symbol: 'none',
					lineStyle: {
						width: 1,
						color: '#409EFF'
					},
					areaStyle: {
						opacity: 0.1,
						color: '#79bbff'
					},
					data: (function() {
						var res = [];
						var len = 30;
						while (len--) {
							res.push(Math.round(Math.random() * 0));
						}
						return res;
					})()
				}, ],
			};
			this.option = option;

		},
		mounted() {
			_this = this;
			_this.getData();
			setInterval(function() {
				_this.getData()
			}, 30000)
		},
		methods: {
			getData() {
				var o = _this.option;
				_this.$API.system.sysInfo.show.get().then(res => {
					o.series[0].data.shift()
					o.series[0].data.push(parseFloat(res.data.memory.percentage_used.replace("%", "")));
					o.xAxis.data.shift();
					o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
				})
			}
		}
	}
</script>
